<template>
	<view class="guideline-container" v-if="show">
		<!-- <view class="mask-box"></view> -->
		<view class="operate-guide" @tap="showGuideVideo">操作指引
			<uni-icons type="right" size="12" color="rgba(255,255,255,1)"></uni-icons> 
		</view>
		<view class="video-box" v-if="showVideo">
			<video :src="url" objectFit="cover" controls :poster="poster"></video>
			<view class="close-btn" @tap="closeGuideVideo">
				<uni-icons type="closeempty" size="24"></uni-icons>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props: {
		    path: {
				type:String,
				default:'',
			}
		},
		data(){
			return{
				show:false,
				showVideo:false,
				url:'',
				poster:'',
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.getOperateGuide()
			})
		},
		methods:{
			// 获取操作指引
			getOperateGuide(){
				this.$request.post(this.$api.getOperateInfo,{
					path: this.path
				}, {
					token:true
				},{
					toast:false
				}).then(res => {
					let {
						data = {}
					} = res;
					if(data&&data.info){
						this.url=data.info
						this.poster=data.cover
						this.show=true
					}else{
						this.show=false
					}
				})
			},

			showGuideVideo(){
				this.showVideo=true
			},
			closeGuideVideo(){
				this.showVideo=false
				// this.$emit('closeGuideVideo',false)
			}
		},
	}
</script>

<style lang="scss" scoped>
.guideline-container{
	
	.mask-box{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: rgba(0, 0, 0, .8);
	}
	.operate-guide{
		border-radius: 72rpx;
		position: fixed;
		right: 32upx;
		bottom: 280upx;
		color: rgba(255,255,255,1);
		background: rgba(38, 188, 253, 0.6);
		padding: 10rpx 16rpx;
		font-size: 24rpx;
		z-index: 1000;
	}
	.video-box{
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%,-60%);
		z-index: 1000;
		.close-btn{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: -40rpx;
			right: 0;
		}
	}
}
</style>